<template>
  <div class="maskCenter">
    <div
      id="box"
      :class="visible?'systemDialog':'systemDialog-hide'"
      style="height:428px;width:336px;"
    >
      <div class="dialog-header" v-movew>
        <span>{{title}}</span>
        <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
          <span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
        </el-tooltip>
      </div>
      <div class="dialog-body">
        <el-form ref="form" label-width="75px" :label-position="'left'">
          <el-form-item label="名称:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="linkAttr.name"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="描述:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="linkAttr.note"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="运行脚本:">
            <el-col :span="24">
              <el-input
                class="systemInput"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                v-model="linkAttr.runScript"
                :resize="'none'"
              ></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="人员过滤:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="linkAttr.userFilter "></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="路由选择:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="linkAttr.selectEnable "></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="okclick">确认</span>
        <span class="systemButtonConfirm" @click="hide">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import { deepCopy } from "@/utils/public";
export default {
  directives: { movew },
  name: "winBussinessLink",
  props: {
    activeLink: { default: null },
  },
  data() {
    return {
      visible: true,
      title: "路由属性",
      linkAttr: {},
    };
  },
  mounted() {
    if (this.activeLink) {
      this.linkAttr = deepCopy(this.activeLink);
    } else {
    }
  },
  methods: {
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    okclick() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("ok", this.linkAttr);
      }, 400);
    },
  },
};
</script>

<style scoped>
.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}
.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
}
.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.dialog-body {
  flex-direction: row;
  color: var(--system-page-topbar-text-color);
}

.btndiv {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  margin-left: 5px;
  line-height: 22px;
  height: 32px;
  background: var(--button-back-color);
}

.btndiv:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.btndiv:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
/*每行的标签高度设为32px*/
>>> .el-form-item__label {
  line-height: 32px;
}
/*设置el-form-item的高度*/
>>> .el-form-item__content {
  height: 32px;
  line-height: 32px;
}
/*数字输入框的上箭头行高*/
>>> .el-input-number__increase,
>>> .el-input-number__decrease {
  line-height: 16px !important;
}
/*数字输入样式*/
>>> .el-input-number {
  line-height: 32px;
  width: 100%;
}
/*element 输入框样式*/
>>> .el-input__inner {
  line-height: 32px;
  height: 32px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
/*element 下拉框*/

>>> .el-input__inner:focus {
  border: 1px solid var(--input-focus-border-color);
}
/*下拉框箭头*/

>>> .el-select__caret {
  line-height: 32px;
}
/*el-form-item 每行离底部多元*/
>>> .el-form-item {
  margin-bottom: 16px;
}
/*tabs 样式*/
>>> .el-tabs__header {
  margin: 0;
}
.el-tabs {
  height: 100%;
}
>>> .el-tabs__active-bar {
  width: 80px !important;
}
>>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}
>>> .el-tabs__item {
  padding: 0 !important;
  font-weight: bold;
  letter-spacing: 2px;
  height: 26px;
  line-height: 26px;
  color: var(--disable-text-color);
  text-align: center;
  border: none;
  min-width: 80px;
}
/*活动颜色*/
>>> .el-tabs__item.is-active {
  color: var(--active-color);
}
/*tabs 分割线*/
>>> .el-tabs__nav-wrap::after {
  height: 0px;
  background-color: var(--page-back-color);
}
/*tabs 前面没有标签内容要显示,去除margin-left*/
.noLabel >>> .el-form-item__content {
  margin-left: 0 !important;
}

.footer {
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
}
/*element 输入框的 focus hover样式*/
>>> .el-input__inner:focus,
>>> .el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>> .el-input__inner:hover,
>>> .el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}
>>> .el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
>>> .el-form-item__label,
>>> .el-checkbox__label {
  color: var(--page-lable-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
</style>